<template>
	<view>
		<view :style="{height: (statusBarHeight) + 'px'}"></view>
		<view class="topBox">
			<view class="upper" :style="{height: (navigationBarHeight ) + 'px'}">
				<image class="iconImg" @click="GoBack()" src="https://img.wilmer.com.cn/admin/2024/3-31/GoBack.png"
					mode=""></image>
				<view class="conter_box">一对一帮你养征信</view>
			</view>
		</view>
		<view class="option">
			<view class="option_box" v-for="(item,index) in list" :key='index'
				:class="{'special fade_Zoom' : currindex== index}" @click="onclick(item,index)">
				<view class="money">¥<text>{{item.name}}</text></view>
				<view class="substance">{{item.content}}</view>
				<image class="Popular" v-if="item.recommend && currindex == 1"
					src="https://img.wilmer.com.cn/admin/2024/3-25/WechatIMG26.jpg" mode="">
				</image>
				<view class="give">{{item.content1}}</view>
				<view class="give" v-if="item.name == '399'">{{item.content2}}</view>
			</view>
		</view>
		<view class="btn conter" @click="GoPay()">立即支付</view>
	</view>
</template>

<script>
	import {
		GetPayAi,
		countries,
	} from '@/common/api/homePage.js'
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度

				list: [{
					name: "29.9",
					content: "留学报告",
					content1: '',
					recommend: false
				}, {
					name: "399",
					content: "至臻留学报告",
					content1: '留学相关视频',
					content2: '24小时人工客服',
					recommend: true
				}, {
					name: "99.9",
					content: "详细留学报告",
					content1: '24小时人工客服',
					recommend: false
				}],
				currindex: 1,
				payForm: {
					getSchoolVo: {} // AI报告
				}, // 支付参数

				orderNumber: "", // 订单编号

				isget: false
			}
		},
		onLoad(option) {
			this.payForm.getSchoolVo.country = option.country
			this.payForm.getSchoolVo.degree = option.degree
			this.payForm.getSchoolVo.major = option.major
			this.payForm.getSchoolVo.use_time = option.use_time
			this.payForm.getSchoolVo.avg = option.avg
			this.payForm.getSchoolVo.tf = option.tf
			this.payForm.getSchoolVo.ys = option.ys
			countries().then(res => {
				for (let i = 0; i < res.data.rows.length; i++) {
					let item = res.data.rows[i]
					if (item.countryName == this.payForm.getSchoolVo.country) {
						this.payForm.getSchoolVo.countryId = item.countryId
					}
				}
			})
		},
		onShow() {
			// 获取顶部安全距离
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
		},
		methods: {
			GoBack() {
				uni.switchTab({
					url: '/pages/school/index'
				})
			},
			onclick(item, index) {
				this.currindex = index
			},
			GoPay() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				uni.login({
					"provider": "weixin",
					success: (res) => {
						setTimeout(() => {
							uni.hideLoading();
						}, 500)
						this.payForm.code = res.code
						// this.payForm.prise = Number(this.list[this.currindex].name) * 100
						this.payForm.prise = 1

						GetPayAi(this.payForm).then(res => {
							// 参考示例。
							let sign = JSON.parse(res.data.data);
							that.orderNumber = res.data.orderNumber

							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: sign.timeStamp,
								nonceStr: sign.nonceStr,
								package: sign.package,
								signType: sign.signType,
								paySign: sign.paySign,
								success: function(res) { // 支付成功的回调
									// console.log('success:' + JSON.stringify(res));
									uni.reLaunch({
										url: `/pages/knowledge/educational?orderNumber=${that.orderNumber}`
									})
								},
								fail: function(err) { // 用户取消支付的回调
									// console.log('fail:' + JSON.stringify(err));
									uni.showToast({
										title: '你已取消支付',
										icon: 'none'
									})
								}
							});

						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBox {
		width: 100vw;
		height: 580rpx;
		background: url('https://img.wilmer.com.cn/admin/2024/3-31/%E5%9B%BE%E5%B1%82%202%206.png') no-repeat;
		background-size: 100% 100%;
	}

	.upper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.conter_box {
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.iconImg {
			width: 28rpx;
			height: 40rpx;
			position: absolute;
			left: 28rpx;
		}
	}

	.option {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.option_box {
			padding-top: 32rpx;
			width: 220rpx;
			height: 228rpx;
			border-radius: 16rpx;
			border: 1px solid #319AF5;
			color: #319AF5;
			position: relative;

			.hot {
				width: 58rpx;
				height: 58rpx;
				position: absolute;
				top: -4rpx;
				left: -4rpx;
			}

			.money {
				font-family: Branding-BoldItalic;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;

				text {
					font-family: Branding-BoldItalic;
					font-size: 48rpx;
					font-weight: 500;
					letter-spacing: 0.03em;
				}
			}

			.substance {
				margin-top: 20rpx;
				font-family: Branding-BoldItalic;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;
			}

			.Popular {
				width: 104rpx;
				height: 96rpx;
				position: absolute;
				left: -4rpx;
				top: -8rpx;
			}

			.give {
				font-family: Branding-BoldItalic;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;
			}
		}

		.special {
			background: #319AF5;
			border: 1px solid #319AF5;
			color: #FFFFFF;
		}
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: #319AF5;
		font-family: Branding-BoldItalic;
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.03em;
		color: #fff;
		margin: 500rpx auto 0;
	}

	.fade_Zoom {
		animation: pulse;
		animation-duration: 2s; // 时间
		animation-iteration-count: 1; // 此行次数
	}
</style>